<template>
    <div>
        <el-page-header @back="goBack">
            <template #content>
                <span class="text-large font-600 mr-3"> 商家资料信息 </span>
            </template>
        </el-page-header>
        <el-card shadow="never">
            <el-descriptions title="基础信息" direction="vertical" :column="6" border>
                <el-descriptions-item label="名字">{{ merchant.name }}</el-descriptions-item>
                <el-descriptions-item label="分类">
                    <el-tag size="small">{{ merchant.catename }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="LOGO">
                    <el-image fit="cover" style="width: 100px; height: 100px" :src="merchant.logo"></el-image>
                </el-descriptions-item>
                <el-descriptions-item label="坐标">{{ merchant.coordinates.coordinates[0] }},{{
                    merchant.coordinates.coordinates[1] }}
                </el-descriptions-item>

                <el-descriptions-item label="地址">{{ merchant.address }}
                </el-descriptions-item>
                <el-descriptions-item label="营业时间">{{ merchant.business_hours }}
                </el-descriptions-item>
                <el-descriptions-item label="图片">
                    <div style="display: flex;justify-content: space-evenly; align-items: center;">
                        <div v-for="(img, ind) in merchant.images">
                            <el-image fit="cover" :preview-src-list="merchant.images" style="width: 100px; height: 100px"
                                :src="img"></el-image>
                        </div>
                    </div>
                </el-descriptions-item>
                <el-descriptions-item label="描述">
                    <div style="width:300px;">
                        {{ merchant.description }}
                    </div>
                </el-descriptions-item>
            </el-descriptions>
            <el-descriptions title="图像信息" direction="vertical" :column="6" border>
                <el-descriptions-item label="视频">
                    <div style="display: flex;">
                        <div class="videoPlayer" v-for="(v, ind) in merchant.videos" :key="ind">
                            <hd-video-player :id="'v-' + ind" :url="v" @triggerEvent="triggerEvent"></hd-video-player>
                        </div>
                    </div>
                </el-descriptions-item>
            </el-descriptions>
            <el-descriptions title="位置地图" direction="vertical" :column="6" border>
                <el-descriptions-item label="视频">
                    <div id="container">
                    </div>
                </el-descriptions-item>
            </el-descriptions>

            <el-descriptions title="小程序封面" direction="vertical" :column="6" border>
                <el-descriptions-item label="封面">
                    <div>
                        <div class="poster" v-for="(v, ind) in merchant.posters" :key="ind">
                            <img :src="v" alt="">
                            <!-- <el-image fit="cover" :preview-src-list="merchant.posters" :src="v"></el-image> -->
                        </div>
                    </div>
                </el-descriptions-item>
            </el-descriptions>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import router from "@/plugins/router"
import { http } from '@/plugins/axios'

// 获取路由参数
const { id } = router.currentRoute.value.params
const merchant = ref({
    id: null,
    category_id: null,
    name: "",
    logo: "",
    tel: "",
    address: "",
    description: null,
    status: "",
    coordinates: {
        type: "Point",
        coordinates: []
    },
    business_hours: "",
    images: [
    ],
    videos: [
    ],
    user_id: null,
    created_at: "",
    updated_at: "",
    catename: "",
    posters: []
})
const getMer = async () => {
    merchant.value = await http.request({
        method: 'get',
        url: `/merchant/${id}`
    })
}
const triggerEvent = (value) => {
    console.log("是否播放：", value);
}
let map: any = null
const state = reactive<any>({
    markerLayer: '',
    marker: null,
    infoWindow: null,
    value: 1,
})
onMounted(async () => {
    await getMer()
    await init();
})
const TMap = (window as any).TMap
/**
 * 初始化地图
 */
const init = () => {
    const center = new TMap.LatLng(merchant.value.coordinates.coordinates[1], merchant.value.coordinates.coordinates[0])
    map = new TMap.Map(document.getElementById('container'), {
        center: center, // 设置地图中心点坐标
        zoom: 11, // 设置地图缩放级别
        viewMode: '2D',
    })
    addImgMarker(center)
    // 监听地图点击事件
    map.on('click', (e: any) => {
        // 清除点标记
        state.marker.setMap(null)
        // 关闭信息窗关闭
        state.infoWindow.close()
        state.marker = null
        // 添加点标记
        addImgMarker(e.latLng)
        // 地址解析
        getAddress(e)
    })

    // 初始化infoWindow
    state.infoWindow = new TMap.InfoWindow({
        map: map,
        position: center,
        offset: { x: 0, y: -32 }, // 设置信息窗相对position偏移像素
    })
    // 初始关闭信息窗关闭
    state.infoWindow.close()
}

/**
 * 添加点标记
 * @param data data
 */
const addImgMarker = (data: any) => {
    state.marker = new TMap.MultiMarker({
        map: map,
        geometries: [{ position: new TMap.LatLng(data.lat, data.lng) }],
    })
}

/**
 * 逆地址解析
 * @param e 待解析经纬度
 */
const getAddress = (e: any) => {
    const geocoder = new TMap.service.Geocoder() // 新建一个正逆地址解析类
    const location = new TMap.LatLng(e.latLng.lat, e.latLng.lng)
    geocoder.getAddress({ location: location }).then((res: any) => {
        if (res.status === 0) {
            state.infoWindow.open()
            state.infoWindow.setPosition(e.latLng) // 设置信息窗位置
            state.infoWindow.setContent(res.result.address) // 设置信息窗内容
        }
    })
}

/**
 * 修改地图类型
 * @param e e
 */
const changebasemap = (e: any) => {
    if (e.target.value === 1) {
        map.setBaseMap({ type: 'vector' })
    } else if (e.target.value === 2) {
        map.setBaseMap({ type: 'satellite' })
    }
}

const goBack = () => {
    router.go(-1)
}
</script>

<style scoped>
#container {
    width: 500px;
    height: 300px;
}

.videoPlayer {
    height: 300px;
    width: 500px;
    margin: 0 auto;
}
</style>